●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Hero search area with inputs (text, selects) and a primary action button.
- Responsive results grid rendering CourtCard components for each court.
- CourtCard displays logo, name, location, price range, court count, HTML description, tag chips, and an action button.
- Tag color mapping for several tag values and simple bookmark icon.
## Key components
- Razor page: PadelFinderPage.razor
- Reusable component: CourtCard.razor (uses [Parameter], @key and MarkupString)
- View model: CourtViewModel.cs
- HTML inputs (text, select), foreach rendering, and basic buttons/icons
## How it works
- Static sample data is created in OnInitialized and bound to a List<CourtViewModel>.
- The page iterates courts via foreach and renders <CourtCard Court="@court" @key="court.Id" />.
- CourtCard accepts a CourtViewModel parameter, renders MarkupString for Description, and computes CSS classes for tags in GetTagClasses.
- No form model binding (@bind-*) or DataAnnotations validation is present; inputs are static HTML controls and need wiring to search/filter logic.
## Styling
- Uses Tailwind utility classes (container, mx-auto, grid, flex, gap-*, px-*, text-*) for layout and responsive behavior.
- Cards use shadow, rounded corners, and hover transitions driven by Tailwind classes; hero uses a background image with an overlay.
- Responsive grid adapts columns via sm:/lg: utility breakpoints.
## Reuse steps
1. Add Tailwind CSS to the project or ensure the app uses a Tailwind-compatible build pipeline.
2. Copy CourtViewModel, CourtCard.razor and PadelFinderPage.razor into Pages/Components folders.
3. Replace the static courts list with an injected service or HttpClient call to fetch real data.
4. Implement search/filter logic: bind inputs with @bind-*, add a method to filter the courts list, and call StateHasChanged as needed.
5. Add authentication/authorization if bookmark or apply actions require user context.
## Limitations & next steps
- This is a single-page demo generated by Instruct UI and uses in-memory sample data; a backend API and data services are required for real data.
- Inputs are plain HTML elements without @bind-* or validation; add EditForm and DataAnnotationsValidator for form validation where needed.
- Icons reference external font libraries (e.g., Font Awesome); ensure those assets are included.
- Extend with paging, server-side filtering, map integration, or detail navigation for each court.